<template>
    <div>
        <el-row>
            <el-col :span="24">
                <h1>电影管理</h1>
            </el-col>
        </el-row>
        <el-row >
            <el-col>
                <el-button @click="handleList">刷新</el-button>
                <el-button >添加电影</el-button>
            </el-col>
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-select v-model="select" slot="prepend" style="width: 130px" placeholder="请选择">
                    <el-option v-for="(movietype,i) in movieTypes" :label="movietype.movieTypeName" :value="movietype.id"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="handleSelect">搜索</el-button>
            </el-input>
            <el-col :span="24">
                <el-table
                        v-loading="loading"
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="movieName"
                            label="电影名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="moviePic"
                            label="电影图"
                            width="180">
                      <template slot-scope="scope">
                        <el-image :src="scope.row.moviePic" :preview-src-list="[scope.row.moviePic]">
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                          </div>
                        </el-image>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="language"
                            label="语种"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="source"
                            label="片源地"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="时长"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="releaseTime"
                            label="上映时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="endTime"
                            label="下映时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="boxOffice"
                            label="票房"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="want"
                            label="想看"
                            width="180">
                    </el-table-column>
                    <el-table-column  label="操作" disabled>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleUpdate(scope.row.id)">修改</el-button>
                            <el-popconfirm
                                    confirm-button-text='好的'
                                    cancel-button-text='不用了'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="这是一段内容确定删除吗？"
                                    @confirm="handleDelete(scope.$index)"
                            >
                                <el-button slot="reference" size="mini">删除</el-button>
                            </el-popconfirm>
                            <el-button size="mini" @click="handleComments(scope.row.id)">查看影评</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="handlePage"
                        :current-page.sync="page">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "MovieListView.vue",
        data() {
            return {
                loading: true,
                tableData: [],
                movieTypes: [],
                movieType: '',
                select: '',
                input: '',
                total: '',
                pageSize: '',
                page: 1
            }
        },
        created() {
            this.handleList();
        },
        methods:{
            handleList(){
                this.axios.get("manage/movie/list").then(response=> {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                        this.movieTypes = response.data.movieType;
                        this.pageSize = response.data.data.pageSize;
                    }
                }).finally(()=>this.loading=false)
            },
            handleDelete(index){
                this.axios.get("manage/movie/delete",{params:{id:this.tableData[index].id}}).then(response=>{
                    if (response.data.code==200){
                        this.tableData.splice(index,1);
                    }
                })
            },
            handlePage(){
                this.loading=true;
                this.axios.get("manage/movie/list",{params:{keyword:this.input,movieTypeId:this.select,pageNum:this.page}}).then(response=>{
                    if (response.data.code==200){
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                        this.loading=false;
                    }
                })
            },
            handleSelect(){
                this.page=1
                this.loading=true;
                this.axios.get("manage/movie/list",{params:{keyword:this.input,movieTypeId:this.select}}).then(response=>{
                    if (response.data.code==200){
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                        this.loading=false;
                    }
                })
            },
            handleUpdate(id){
                this.$router.push({path: "/movie/add", query: {
                    id: id
                }})
            },
            handleComments(id){
                this.$router.push({path: "/comments/list", query: {
                    movieId: id
                }})
            }
        }
    }
</script>

<style scoped>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>